<template>
  <div class="container" >
    <div class="search">
      <img src="http://file.rzkeji.com/web/loveciy/img/plan/search.png"/>
      <input type="text" placeholder="搜索 中山大学" @blur="search" placeholder-style="font-size: 14px"/>
    </div>
    <div class="joinMe" @click="join">
      <img src="http://file.rzkeji.com/web/loveciy/img/plan/people.png"/>
      <span>加入我们</span>
    </div>
    <div class="scroll_box" > 
      <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;" @scroll="scroll1">
        <div class="item_list" v-for="(value,index) in planData">
          <div class="share">
          <button open-type="share">
           <!-- <img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png" class="shareBtn"/> -->
          </button>
          <span class="shareTitle">{{value.en_desc}}</span>
          <span class="shareTeam">{{value.team_name}}</span>
          <span class="shareSchool">{{value.school_name}}</span>
          <div class="sharePick" @click="goDetails" :data-index="value.article_id">{{value.btn_name}}</div>
          <div class="shareImg">
            <img :src="value.img_url" @click="goDetails" :data-index="value.article_id"/>
          </div>
          </div>
        </div>
      </scroll-view>
    </div>
    <div class="ucenter">
          <navigator url="../personal/main">
            <img src="http://file.loveciy.net/web/cut/icon-ucenter.png" class="customer"/>
          </navigator>
    </div>
    <div class="customerWrap">
          <navigator url="../customer/main">
            <img src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"/>
          </navigator>
    </div>
  </div>
</template>

<script>


export default {
  data () {
    return {
      planData:[],
      shareId:""
    }
  },
  methods: {
    join(){
      var src="?id="+this.shareId
      this.$currency.goDetails(src)
    },
    scroll1(e){
      var index=Math.ceil(e.target.scrollLeft/335);
      this.shareId=this.planData[index].article_id;
    },
    goDetails(e){
      var src='?id='+e.target.dataset.index
      console.log(src)
      this.$currency.goDetails(src)
    },
    search(e){
      var _this=this;
      _this.getPlanData("https://zlz.loveciy.net/api/naodong/get-naodong-list",e.target.value)
    },
    getPlanData(url,keyword)
    {
      var _this=this;
      _this.planData=[];
      _this.$request.getData(url,{keyword:keyword}).then(res =>{
        var res=res.data.data;
        for(let [index,value] of res.entries())
        { 
          _this.planData.push(value)
          _this.shareId=_this.planData[0].article_id;
        }
      })
    }
  },
  onLoad() {
    var _this=this;
    _this.getPlanData("https://zlz.loveciy.net/api/naodong/get-naodong-list","")
  },
  onShareAppMessage: function (res) {   //分享
    this.$currency.share(res,'脑洞计划页面分享','/pages/plan/main')
  }
}
</script>

<style scoped>
.scroll_box{overflow: hidden;white-space: nowrap;padding-bottom: 10px;margin-left: 12px;}
.item_list{width: 335px;display: inline-block;}
.container{width: 100%;background: #f2f2f2;height: 100%;}
.search{width: 100%;height: 40px;position: relative;top: 5px}
.search input{width: 290px;height: 32px;position: absolute;left: 24px;top: 5px;padding-left: 40px;border-radius: 5px;background: #fff}
.search img{width: 21px;height: 21px;position: absolute;left:36px;top: 10px;z-index: 99}
.joinMe{width: 351px;height: 25px;display: flex;justify-content: flex-end;margin-top:18rpx;}
.joinMe img{width: 20px;height: 20px;vertical-align: middle;}
.joinMe span{width: 80px;height: 24px;text-align: center;line-height: 24px;vertical-align: middle;display: block;font-size: 14px;}
swiper,swiper-item{width: 351px;height: 489px;}
.share{width: 305px;margin-left:10px;display: flex;flex-direction: column;border-radius:10px;padding: 0px 10px;background: #fff;margin-right: 20px;}
.shareBtn{width: 21px;height: 20px;}
button{width: 50px;height: 32px;margin-left: 260px;background: transparent;}
button::after{border:none;}   /*初始化button的样式*/
.shareTitle{width: 100%;height: 25px;text-align: center;line-height: 25px;font-size: 12px;}
.shareTeam{width: 100%;height: 30px;text-align: center;line-height: 30px;font-size: 20px;font-weight: 700}
.shareSchool{width: 100%;height: 30px;text-align: center;line-height: 30px;font-size: 13px;}
.sharePick{width: 150px;height: 30px;border:0.1px solid #CCCCCC;margin:10px auto;border-radius: 15px;text-align: center;line-height: 30px;}
.shareImg{width: 305px;height:305px;}
.shareImg img{width: 295px;height: 295px;margin-left: 5px;}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 20px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 80px;background: rgba(0,0,0,0.5);border-radius: 50px;}
</style>
